import React, { useState } from 'react'
import MarkdownEditor from '@uiw/react-markdown-editor';
import { Form, Input, Upload, Button, message, Card } from 'antd'
import './index.css'
import { UploadOutlined } from '@ant-design/icons';


function useMarkdown() {
    const [markdown, setMarkdown] = useState("");
    return {
        markdown,
        setMarkdown
    }
}

function useFileUpload() {
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return props;
}

const BlogEdit = () => {

    const onFinish = (value) => {
        console.log(value);
    }

    const { markdown, setMarkdown } = useMarkdown()

    const { props } = useFileUpload()

    return (
        <div >
            <Card size="small" title="编辑博文" extra={<a href="#">提交</a>}>
                <Form
                    name="basic"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[
                            {
                                required: true,
                                message: '请输入标题',
                            },
                        ]}
                    >
                        <Input className="v-input" />
                    </Form.Item>
                    <div style={{ width: '100%' }}>
                        <div style={{ display: 'inline-block' }}>
                            <Form.Item
                                label="分类"
                                name="title"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入分类',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </div>
                        <div style={{ display: 'inline-block', marginLeft: '35px' }}>
                            <Form.Item
                                label="标签"
                                name="title"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入标签',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </div>
                    </div>

                    <Form.Item
                        label="描述"
                        name="title"
                        rules={[
                            {
                                required: true,
                                message: '描述',
                            },
                        ]}
                    >
                        <Input.TextArea rows={4} className="v-input" />
                    </Form.Item>
                    <div style={{ paddingLeft: '50px', marginBottom: '30px' }}>
                        <Upload {...props}>
                            <Button icon={<UploadOutlined />}>点击上传图片</Button>
                        </Upload>
                    </div>
                    <div style={{ width: '90%', margin: 'auto' }}>
                        <MarkdownEditor
                            style={{ width: '70%', height: '30%' }}
                            value="# This is a H1  \n## This is a H2  \n###### This is a H6"
                            onChange={(editor, data, value) => {
                                console.log(editor, '@@');
                                console.log(data, '##');
                                setMarkdown(value)
                            }}
                        />
                    </div>
                </Form>
            </Card>
        </div>
    )
}

export default BlogEdit
